<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>场景秀</title>
	    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	    <style>
	    	*{
	    		margin: 0;
	    		padding: 0;
	    	}
	    	body{
	    		height: 100vh;/*vh视口的高度  vw视口的宽度*/
	    		background-color: #BBE2F4;
	    	}
	    	.container{
	    		height: 100vh;
	    		min-width: 320px;
	    		max-width: 414px;
	    		background-image: url(images/bg.png) ;
	    		background-size: 100%;/*百分比尺寸相当于container 写一个代表X另一个相当于auto*/
	    		/*或者contain：背景图片能够完整的展示在盒子里边但是不能确保背景图片把盒子填满*/
	    		/*cover:能够把整个盒子填满但图片可能展示不完*/
	    		background-repeat: no-repeat;
	    		
	    		position: relative;
	    	}
	    	.big-fish{
	    		/*position: absolute;*/
	    		
	    		animation:bigfish-move 2s ease-out forwards;
	    	}
	    	@keyframes bigfish-move{
	    		from{
	    			transform: translate(-40px,0);
	    		}to{
	    			transform: translate(20px,0);
	    		}
	    	}
	    	.text{
	    		width: 80vw;
	    		position: absolute;
	    		top: 80px;
	    		left: calc(50% - 80vw/2);/*calc()计算方法。注意：减号两边一定要留空格*/
	    		animation: text-move 2s forwards;
	    	}
	    	@keyframes text-move{
	    		0%{
	    			transform: translate(180px,0);
	    		}100%{
	    			transform: translate(0,0);
	    		}
	    	}
	    	.ice{
	    		width: 60vw;/*视口的60%*/
	    		position: absolute;
	    		bottom: 23vh;
	    		left: calc(50% - 200px/2);
	    		animation: icemove1 3s ease-out,icemove2 1s linear 3.1s infinite;
	    	}
	    	@keyframes icemove1{
	    		0%{
	    			transform: translate(0,150px);
	    		}100%{
	    			transform: translate(0,0);
	    		}
	    	}
	    	@keyframes icemove2{
	    		0%{
	    			transform: translate(0,0);
	    		}50%{
	    			transform:translate(0,5px) ;
	    		}100%{
	    			transform:translate(0,0) ;
	    		}
	    	}
	    	.water{
	    		width: 100vw;
	    		height: 48vh;
	    		background: url(images/water.png) ;
	    		position: absolute;
	    		bottom: 0;
	    	}
	    	.first-fish{
	    		width: 8vw;
	    		position: absolute;
	    		left: -8vw;
	    		bottom:45vh;
	    		animation: first-fish-move 6s infinite;
	    	}
	    	@keyframes first-fish-move{
	    		0%{
	    			transform: translate(0,0);
	    		}
	    		100%{
	    			transform: translate(360px,0);
	    		}
	    	}
	    	.second-fish{
	    		width: 8vw;
	    		position: absolute;
	    		right: -40px;
	    		bottom: 8vh;
	    		animation: second-fish-move 5s linear infinite  ;
	    	}
	    	@keyframes second-fish-move{
	    		0%{
	    			transform: translate(0,0);
	    		}
	    		100%{
	    			transform: translate(-360px,0);
	    		}
	    	}
	    	.bubble{
	    		width: 20vw;
	    		position: absolute;
	    		left: 10vw;
	    		bottom:12vh;
	    		opacity: 0;
	    		animation: bubble-move .3s ease-in 2.5s forwards;
	    	}
	    	@keyframes bubble-move{
	    		0%{
	    			transform: translate(0,6vh) scale(0.3);
	    			/*transform:matrix(.3,0,0,.3,0,6vh)*/
	    			opacity: 0;
	    		}100%{
	    			transform: translate(0,0)scale(1);
	    			/*transform:matrix(1,0,0,1,0,0)*/
	    			opacity: 1;
	    		}
	    	}
	    	.weixin{
	    		width: 80px;
	    		position: absolute;
	    		left: calc(50% - 80px/2);
	    		bottom:30vh ;
	    	}
	    	#sound{
	    		width: 30px;
	    		height: 30px;
	    	    /*background-color: red;*/
	    		position: absolute;
	    		top: 5vw;
	    		right: 3vh;
	    		background-size: 30px 30px;
	    	}
	    	
	    	
	    </style>
	    <script type="text/javascript">
	    	window.onload=function(){
	    		var oImg=document.getElementById("sound");
	    		var onOff=true;
	    		var audio=document.createElement("audio")
	    		audio.src="images/music.mp3";
	    		oImg.onclick=function(){
	    			
	    			if(onOff){
	    			oImg.src="images/sound.png";
	    			onOff=false;
	    			audio.play();
	    			}else{
	    				oImg.src="images/muted.png";
	    				onOff=true;
	    				audio.pause();
	    				audio.currentTime=0;
	    			}
	    			
	    		}
	    	}
	    </script>
	</head>
	<body>
		<div class="container">
			<img src="images/fish.png"class="big-fish"/>
			<img src="images/text.png"class="text"/>
			<img src="images/ice.png"class="ice"/>
			<div class="water"></div>
			<img src="images/first-fish.png"class="first-fish" alt="" />
			<img src="images/second-fish.png" class="second-fish" />
			<img src="images/bubble.png"class="bubble"/>
			<img src="images/weixin.png"class="weixin"/>
			
			<img src="images/muted.png" id="sound"/>
			
		</div>
	</body>
</html>
